<template>
  <div>
     <div class="login_wrap">
         <div class="login_box">
             <div>
               <center> <font style="font-size:40px">欢迎登陆</font></center>
             </div>
             <el-form :model="loginForm" class="form" label-width="60px"  ref="loginFormRef">
                <el-form-item label="账号"  >
                    <el-input  v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item label="密码"  >
                    <el-input type="password" v-model="loginForm.password"  prefix-icon="el-icon-s-cooperation"></el-input>
                </el-form-item>
             
             <el-row class="btn_wrap">
                <el-button class="btn" size="medium" type="success" @click="loginHandle()">登录</el-button>
                <el-button class="btn" type="success" @click="resetForm()">重置</el-button>
             </el-row>
             </el-form>
         </div>
     </div>
  </div>
</template>

<script>
export default {
    name:'Login',
    data() {
        return {
            loginForm:{
                username:'text',
                password: 'text',
            },
        }
    },
    methods:{
         resetForm() {
        this.loginForm.username = '',
        this.loginForm.password = ''
      },
    //   loginHandler(){
    //     //  const result = awite this.$http.post(`http://127.0.0.1:6060/api/login`,this.loginForm)
    //     //  console.log(result)
    //      const result = this.$http.post(`http://127.0.0.1:6060/api/text?username=${this.loginForm.username}&username=${this.loginForm.username}`).then(
    //            response => {
    //                console.log('请求成功了',response.data);
    //            },
    //            error => {
    //                console.log('请求失败了',error.message);
    //            }
    //        )
    //        console.log(result)
    //   },


    //登录处理函数
      async loginHandle() {
        const {data:result} = await this.$http({
        method:"post",
        url:"http://127.0.0.1:6060/api/admin/login",
        data:{
            password:this.loginForm.password,
            username:this.loginForm.username
        }
        });
        // console.log(result)

        if(result.status==0 || result.status==1){
            //弹窗处理
            this.$Message.error({
                message:result.message,
                duration:1500
            })
        }

        //登录成功后的操作
        else if(result.status==200){
            console.log('dd')
            this.$Message.success({
                message:result.message,
                duration:1500
            })
            window.sessionStorage.setItem('token',result.token);
            this.$router.push('/Home')
        }
    },
    }
}
</script>

<style lang="less" scoped>
    .login_wrap{
        height: 100%;
        .login_box{
            padding: 30px 15px;
            height: 300px;
            width: 450px;
            position: absolute;
            background-color: #fff;
            border-radius: 5px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            .form{
                margin-top:50px;
            }
            .btn_wrap{
                display: flex;
                justify-content: center;
                align-content: center;
                .btn{
                    padding: 10px 30px;
                    
                }
            }
         
        }
    }
</style>